:root{--primary-color: rgb(11, 78, 179)}*,
*::before,
*::after{box-sizing: border-box}
.navcus {
    margin-left: 70px;
    margin-right: 70px;
}
body{font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;}
.card {
    margin-left: 80px;
    margin-right: 80px;
    box-shadow: 1px 1px 1px 1px #666;
    margin-bottom: 30px;
}

.card:hover {
    box-shadow: 10px 10px 5px #000000;
    -moz-box-shadow: 0px 10px 5px #000000;
    -webkit-box-shadow: 0px 1px 5px #000000;
}
.ctmcardform {
    padding-top: 60px;
}

/* label{display: block;margin-bottom: 0.5rem}
input{display: block;width: 100%;padding: 0.75rem;border: 1px solid #ccc;border-radius: 0.25rem;height: 50px} */
/* .width-50{width: 50%} */
/* .ml-auto{margin-left: auto} */
/* .text-center{text-align: center} */
.progressbar{position: relative;display: flex;justify-content: space-between;counter-reset: step;margin: 2rem 0 4rem}
.progressbar::before,
.progress{content: "";position: absolute;top: 50%;transform: translateY(-50%);height: 4px;width: 100%;background-color: #dcdcdc;z-index: 1}
.progress{background-color: rgb(0 128 0);width: 0%;transition: 0.3s}
.progress-step{width: 2.1875rem;height: 2.1875rem;background-color: #dcdcdc;border-radius: 50%;display: flex;justify-content: center;align-items: center;z-index: 1}
.progress-step::before{counter-increment: step;content: counter(step)}
.progress-step::after{content: attr(data-title);position: absolute;top: calc(100% + 0.5rem);font-size: 0.85rem;color: #666}
.progress-step-active{background-color: var(--primary-color);color: #f3f3f3}
/* .form{width: clamp(320px, 30%, 430px);margin: 0 auto;border: none;border-radius: 10px !important;overflow: hidden;padding: 1.5rem;background-color: #fff;padding: 20px 30px} */
.form {
    margin-left: 120px;
    margin-right: 120px;
    padding-bottom: 20px;
}
.step-forms{display: none;transform-origin: top;animation: animate 1s}
.step-forms-active{display: block}
/* .group-inputs{margin: 1rem 0}@keyframes animate{from{transform: scale(1, 0);opacity: 0}to{transform: scale(1, 1);opacity: 1}} */
/* .btns-group{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.5rem}
.btn{padding: 0.75rem;display: block;text-decoration: none;} */
/* .btn:hover{box-shadow: 0 0 0 2px rgb(126, 28, 218), 0 0 0 3px var(--primary-color)} */
.progress-step-check{position: relative;background-color: green !important;transition: all 0.8s}
.progress-step-check::before{position: absolute;content: '\2713';width: 100%;height: 100%;top: 8px;left: 13px;font-size: 12px}
.welcome{height: 450px;width: 350px;background-color: #fff;border-radius: 6px;display: flex;justify-content: center;align-items: center; margin-left: auto; margin-right: auto;}
.welcome .content{display: flex;align-items: center;flex-direction: column}
.checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #7ac142;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}
.checkmark{width: 56px;height: 56px;border-radius: 50%;display: block;stroke-width: 2;stroke: #fff;stroke-miterlimit: 10;margin: 10% auto;box-shadow: inset 0px 0px 0px #7ac142;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}
.checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}@keyframes stroke{100%{stroke-dashoffset: 0}}@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}